<template>
  <div class="statement">
    <ol>
      <li>{{ demoProp.title }} 系统主要使用下面tabs</li>
 
    </ol>
  </div>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="User" name="first">User+dsfa </el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ tabsthtm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->


</template> 
          
<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import { TabsPaneContext } from "element-plus";
import { demoProps } from "@/stores/modules/merakDemo";
import dropWrap from "../dropWrap.vue";
import Prism from "prismjs";
import "../prism.css";

/* 响应式变量 */

const demoProp = demoProps();
const activeName = ref<string>("first");

let tabsthtm = ref<string>(`
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="User" name="first">User+dsfa </el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
    
    `)

/* 生命周期 */
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});

/* methods */
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style lang="scss" scoped>
.el-row::v-deep {
  margin-bottom: 20px;
}
.el-alert {
  margin-bottom: 20px;
}
</style>
          